<template type="text/x-template" id="tpl-switch-checkbox">
    <input :id="id"
           type="checkbox"
           data-toggle="switch"
           data-on-text="#(i18n['text_enabled'])"
           data-off-text="#(i18n['text_disabled'])">
</template>

<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('switch-checkbox', {
        template: document.getElementById('tpl-switch-checkbox'),
        props: {
            id: {
                default: function () {
                    return "sc-" + Date.now();
                }
            },
            checked: {
                default: true
            }
        },
        data: function () {
            return {
                jq: null
            }
        },
        watch: {
            checked: function (n, o) {
                this.jq.bootstrapSwitch('state', n)
            }
        },
        mounted: function () {
            this.jq = $(document.getElementById(this.id));
            this.create()
        },
        methods: {
            create: function () {
                let self = this;
                this.jq.bootstrapSwitch({
                        state: self.checked,
                        onSwitchChange: function (event, state) {
                            self.$emit("switch", state)
                        }
                    }
                )
            }
        }
    })
})
</script>